<template>
  <div class="calendar-view">
    <a-calendar v-if="showCalendar" mode="month" @panelChange="panelChange">
      <ul slot="dateCellRender" slot-scope="value" class="events">
        <!-- 节假日 -->
        <!-- <li v-show="handleGetIsHoliday(value).name">
          <a-badge status="error" :text="handleGetIsHoliday(value).name" />
        </li> -->
        <!-- 申请单 -->
        <li v-for="item in handleGetApplication(value)">
          <!-- <a-badge status="success" :text="item.reason" @click="handleClickApplication(item)" /> -->
          <a-badge status="success" @click="handleClickApplication(item)" />
          <span @click="handleClickApplication(item)" style="color:#1677ff">
            {{item.reason}}
          </span>
        </li>
      </ul>
    </a-calendar>
    <!-- 人名 -->
    <a-select class="top-left-user" placeholder="请选择驾驶员" v-model="driver_id" @change="handleSelectVehicle">
      <a-select-option v-for="item in driversList" :key="item.driver_id" :value="item.driver_id">
        {{ item.person_name }}
      </a-select-option>
    </a-select>

    <!-- 详情抽屉 -->
    <a-drawer title="详情" :width="720" :visible="detailVisible" :body-style="{ paddingBottom: '80px' }"
      @close="detailDrawerOnClose">
      <!-- 申请单信息 -->
      <a-form :form="baseInfo" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="申请人">
              <span>{{baseInfo.applicant_name}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系电话">
              <span>{{baseInfo.phone_number}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="申请部门">
              <span>{{baseInfo.department_name}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用车人">
              <span>{{passengers}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="出发时间">
              <span>{{moment(baseInfo.departure_date).format('YYYY-MM-DD')}} {{baseInfo.departure_time_period}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="返回时间">
              <span>{{moment(baseInfo.return_date).format('YYYY-MM-DD')}} {{baseInfo.return_time_period}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="目的地">
              <span>{{baseInfo.destination}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用车事由">
              <span>{{baseInfo.reason}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="申请时间">
              <span>{{moment(baseInfo.apply_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="状态">
              <a-tag :color="getStatusColor(baseInfo.status)">
                {{ baseInfo.status }}
              </a-tag>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-divider>审核信息</a-divider>
      <!-- 审核信息 已审核 -->
      <a-form v-if="baseInfo.status !== '待审批'" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="车辆">
              <span>{{allocations[0] && allocations[0].vehicle_number}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="驾驶员">
              <span>{{allocations[0] && allocations[0].driver_name}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="审批意见">
              <span>{{approvals[0] && approvals[0].comment }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="审批人">
              <span>{{approvals[0] && approvals[0].approver_name}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="审批时间">
              <span>{{approvals[0] && moment(approvals[0].approval_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-divider v-if="baseInfo.status === '已取消'">取消信息</a-divider>
      <!-- 取消信息 -->
      <a-form v-if="baseInfo.status === '已取消'" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="取消原因">
              <span>{{cancelInfo.cancel_reason}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="取消人">
              <span>{{cancelInfo.canceler_name}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="取消时间">
              <span>{{ moment(cancelInfo.cancellation_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-drawer>

  </div>
</template>

<script>
  const Holidays = require('date-holidays')
  import moment from 'moment'
  import {
    apiVehicleApplicationAvailableDrivers,
    apiVehicleApplicationByDriver,
    apiVehicleApplicationDetailById
  } from '@/api/featch'

  export default {
    name: 'DriverAllocation',
    components: {},
    data() {
      return {
        // 假期库
        hd: new Holidays(),
        moment,
        // 车辆列表
        driversList: [],
        // 选中的车辆id
        driver_id: null,
        showCalendar: false,
        allApplication: [],

        // 详情弹窗
        /** 打开的弹窗信息 */
        detailLoading: false,
        // 车辆列表
        driversList: [],
        // 驾驶员列表
        driversList: [],
        detailVisible: false,
        // 申请单信息
        baseInfo: {},
        // 审批表单
        approvalsForm: {
          comment: null,
        },
        // 审批信息
        approvals: [],
        // 分配表单
        allocationsForm: {
          driver_id: null,
          driver_id: null
        },
        // 分配信息
        allocations: [],
        // 用车人
        passengers: [],
        // 取消信息
        cancelInfo: {},

      }
    },
    created() {
      // 初始化 假期库
      this.hd.init('CN')

      this.getAll()
    },
    methods: {
      /**
       * @description 获取状颜色
       * '待审批','已批准','已拒绝','已取消'
       */
      getStatusColor(status) {
        const colorMap = {
          '待审批': 'orange',
          '已批准': 'green',
          '已拒绝': 'red',
          '已取消': '#f50',
        }
        return colorMap[status] || 'default'
      },
      getAll() {
        this.showCalendar = false
        apiVehicleApplicationAvailableDrivers()
          .then(res => {
            if (res.code === 200) {
              this.driversList = res.data
              this.driver_id = this.driversList[0].driver_id
              return apiVehicleApplicationByDriver({
                driver_id: this.driver_id,
                "status": "已批准"
              })
            }
          })
          .then(res => {
            if (res.code === 200) {
              this.allApplication = res.data
              this.showCalendar = true
            } else {
              this.$message.error(res.message)
            }
          })
      },
      // 每个日期格子 调用 节假日
      handleGetIsHoliday(value) {
        const result = this.hd.isHoliday(new Date(value))
        if (result) {
          return result[0]
        } else {
          return {
            name: null
          }
        }
      },
      // 筛选每天的投稿
      handleGetApplication(value) {
        let result = []
        for (const item of this.allApplication) {
          if (moment(item.departure_date).format('YYYY-MM-DD') === moment(value).format('YYYY-MM-DD')) {
            result.push(item)
          }
        }
        return result
      },
      // 获取整个月的工作接口
      /**
       * 日期改变回调
       */
      panelChange(date, mode) {
        console.log(date.format('YYYY-MM'))
      },
      handleSelectVehicle() {
        this.showCalendar = false
        apiVehicleApplicationByDriver({
          driver_id: this.driver_id,
          "status": "已批准"
        }).then(res => {
          if (res.code === 200) {
            this.allApplication = res.data
            this.showCalendar = true
          } else {
            this.$message.error(res.message)
          }
        })
      },
      handleClickApplication(item) {
        this.handleOpenDetail(item.application_id)
      },
      /**
       * @description 打开详情弹窗
       */
      handleOpenDetail(application_id) {
        this.detailLoading = true
        this.detailVisible = true
        apiVehicleApplicationDetailById({
            application_id: application_id
          })
          .then(res => {
            this.detailLoading = false
            if (res.code === 200) {
              this.baseInfo = res.data.baseInfo
              this.approvals = res.data.approvals
              this.allocations = res.data.allocations
              this.passengers = Array.isArray(res.data.passengers) ? res.data.passengers.join(',') : ''
              this.cancelInfo = res.data.cancelInfo
            } else {
              this.$message.error(res.message)
            }
          })
      },
      detailDrawerOnClose() {
        this.detailVisible = false
      },
    }
  }
</script>

<style lang="less" scoped>
  .calendar-view {
    position: relative;
    margin: -16px;

    /deep/ .ant-radio-button-wrapper {
      display: none;
    }

    .events {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .top-left-user {
      position: absolute;
      top: 16px;
      left: 48px;
      width: 120px;
      font-weight: bold;
    }
  }
</style>